<template>
  <div style="width: 100%">
    <!--头部区域开始-->
    <div style="height:60px;display: flex;">

      <!--padding用于设置内边距，即content与border之间的间距-->
      <!--margin用于设置内边距，即元素和其他元素之间的间距-->
      <div style=" width: 240px; display: flex;align-items: center;padding-left: 20px;background-color: #3a456b;">
        <img style="width: 40px;height: 40px;border-radius: 20% " src="@/assets/imgs/ikun_logo.png" alt="">
        <span style="font-size: 20px;font-weight: bold;color: #ffffff; margin-left: 10px">后台管理系统</span>
      </div>

      <div style="flex: 1;border-bottom: 1px solid #ddd;align-items: center;padding-left: 20px;display: flex">
        首页/数据分析
      </div>

      <!--根据内容自适应宽度-->
      <div style="width: fit-content;padding-right: 20px;display: flex;align-items: center;border-bottom: 1px solid #ddd">
        <el-dropdown>
          <div style="display: flex;align-items: center;">
            <img style="width: 40px;height: 40px;border-radius: 20%" src="@/assets/imgs/default_head.png" alt="">
            <span style=" margin-left: 10px;">管理员</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>

        </el-dropdown>
      </div>
    </div>
    <!--头部区域结束-->

    <!--下方区域开始-->



    <div style="display:flex;">
      <!--菜单区域开始-->
      <div style="width: 240px;">
        <!--router 加路由属性，跳转用（属性index="路由"）        -->
        <el-menu router :default-openeds="['1']" :default-active="router.currentRoute.value.path" style="min-height: calc(100vh - 60px)">
          <el-menu-item index="/manager/home">
            <el-icon>
              <House/>
            </el-icon>
            <span>主页</span>
          </el-menu-item>

          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <!--菜单区域结束-->

      <!--如果父容器设置了 display: flex，但子元素没有 flex 属性（如 flex: 1、flex-grow 等），那么子元素的默认行为是：-->
      <!--flex-grow: 0（不会扩展）-->
      <!--flex-shrink: 1（可以收缩）-->
      <!--flex-basis: auto（初始大小由内容决定）-->

      <!--数据渲染区域开始 也就是说父组件用<RouterView />，自动渲染子组件-->

      <div style="flex: 1;padding: 10px;background-color: #e7e7ee">
        <RouterView />
      </div>
      <!--数据渲染区域结束-->

    </div>
    <!--下方区域结束-->


  </div>
</template>

<script setup>

import router from "@/router/index.js";
</script>

<style>
.el-menu {
  background-color: #3a456b;
  border: none;
}
.el-menu .is-active{
  background-color: #537bee;
  color: #fff;
}
.el-sub-menu__title{
  background-color: #3a456b;
  color: #ddd;
}

.el-sub-menu__title:hover{
  background-color: #3a456b;
}

.el-menu--inline .el-menu-item{
  padding-left: 48px !important;
}

.el-menu-item {
  height: 50px;
  color: #ddd;
}
.el-menu-item:not(.is-active):hover {
  background-color: #7a9fff;
  color: #333;
}

.el-dropdown {
  cursor: pointer;
}


.el-tooltip__trigger{
  outline: none;
}



</style>

